<template>
	<view class="fsize-30">
		<u-navbar title="项目订单详情" placeholder>
			<view class="flex align-center" slot="left">
				<u-icon name="arrow-left" size="19" @click="upProjectData"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
		</u-navbar>
		<!-- 订单状态 -->
		<view class="flex justify-between align-center padding-20 bg-white">
			<text>订单号: {{details.orderId}}</text>
			<text class="line-red fweigh-600">{{details.statusText}}</text>
		</view>
		<!-- 商品信息 -->
		<view class="info-plate mt-20">
			<view class="pt-20 bg-white">
				<view class="pb-20 pl-20 pr-20" v-for="(item, index) in details.items" :key="index">
					<view class="flex">
						<image class="width-120 height-120 border-radius-10 shrink0" :src="item.imageUrl"></image>
						<view class="ml-20 w-100 flex flex--row justify-between">
							<view class="flex justify-between align-center">
								<view class="fsize-30">{{item.name}}</view>
								<text class=""><text class="fsize-22">￥</text>{{item.price}}</text>
							</view>
							<view class="flex flex--row fsize-26 line-gray mt-10">
								<text class="mt-8">销售人: {{item.salerName}}</text>
								<text class="mt-8">服务人: {{item.staffName}}</text>
								<text class="mt-8">服务状态: 
									<text :class="item.detailStatus===5?'line-red':item.detailStatus===8?'line-grey':''">{{item.detailStatusText}}</text>
								</text>
							</view>
						</view>
					</view>
					<view class="pt-20 fsize-26 flex align-center">
						<uni-icons custom-prefix="iconfont"  type="icon-date" size="24"/>
						<text>{{item.appointmentTime || '--'}}</text>
					</view>
					<view class="border-t flex justify-end pt-20 mt-20" v-if="!$u.test.isEmpty(lisIx) && item.detailStatus === 5">
						<view class="ml-20">
							<u-tag borderColor="#aaa" color="#000" text="取消服务" plain shape="circle" @click="onCancel(index)"/>
						</view>
						<view class="ml-20">
							<u-tag borderColor="#aaa" color="#000" text="确认服务" plain shape="circle" @click="confirmRs(index)"/>
						</view>
						<view class="ml-20">
							<u-tag 
								borderColor="#aaa" 
								color="#000" 
								text="修改服务人" 
								plain shape="circle" 
								@click="$u.route('/pages/selectPage/staff',{index: index, type: '1'})"
							/>
						</view>
						<view class="ml-20">
							<u-tag borderColor="#aaa" color="#000" text="修改时间" plain shape="circle" @click="selDataTime(index)" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 价格 -->
		<view class="padding-20 fsize-28 line-gray">价格</view>
		<view class="bg-white fsize-30">
			<view class="flex justify-between padding-20 border-b">
				<text class="">订单金额</text>
				<text class="line-red">￥{{details.projectAmount}}</text>
			</view>
			<view class="flex justify-between padding-20 border-b">
				<text class="">实付金额</text>
				<text class="line-red">￥{{details.orderAmount}}</text>
			</view>
			<view class="flex justify-between padding-20 border-b">
				<text class="">消费门店</text>
				<text class="line-gray">{{details.storeName || ''}}</text>
			</view>
			<view class="flex justify-between padding-20 border-b">
				<text class="">支付方式</text>
				<text class="line-gray">{{details.paymentName || ''}}</text>
			</view>
		</view>
		<!-- 时间 -->
		<view class="padding-20 fsize-28 line-gray">时间</view>
		<view class="bg-white fsize-30">
			<view class="flex justify-between padding-20 border-b">
				<text class="">下单时间</text>
				<text class="line-gray">{{details.createTime}}</text>
			</view>
			<view class="flex justify-between padding-20 border-b">
				<text class="">支付时间</text>
				<text class="line-gray">{{details.paymentTime || '--'}}</text>
			</view>
		</view>
		<!-- 物流信息 -->
		<view v-if="derails.shipStatusText==='已发货'">
			<view class="padding-20 fsize-28 line-gray">物流信息</view>
			<view class="bg-white fsize-30">
				<view class="flex justify-between padding-20 border-b">
					<text class="">物流单号</text>
					<text class="line-gray">12345481981619</text>
				</view>
			</view>
		</view>
		
		<!-- 下单用户信息 -->
		<view class="padding-20 fsize-28 line-gray">下单用户信息</view>
		<view class="bg-white fsize-30">
			<view class="flex justify-between padding-20 border-b">
				<text class="">用户ID</text>
				<text class="line-gray">{{details.userId}}</text>
			</view>
			<view class="flex justify-between padding-20 border-b">
				<text class="">用户名</text>
				<text class="line-gray">{{details.userNickName}}</text>
			</view>
			<view class="flex justify-between padding-20 border-b">
				<text class="">联系方式</text>
				<text class="line-gray">{{details.userMobile}}</text>
			</view>
			<view class="flex flex--row padding-20">
				<text class="">留言</text>
				<text class="line-gray fsize-26 mt-10">无订单留言</text>
			</view>
		</view>
		<view class="bottom-button flex justify-end pt-10" v-if="!$u.test.isEmpty(lisIx) && details.status === 1">
			<view class="ml-20">
				<u-tag 
					text="取消订单" 
					shape="circle" 
					bgColor="#e54d42" 
					borderColor="#e54d42" 
					@click="operate(details.orderId,'cancel')"
				/>
			</view>
			<view class="ml-20">
				<u-tag 
					text="收款码" 
					shape="circle" 
					bgColor="#e54d42"  
					borderColor="#e54d42" 
					@click="$u.route('pages/payment/qrc', {id:details.orderId, orderType: 12})"
				/>
			</view>
			<view class="ml-20">
				<u-tag 
					text="确认收款" 
					shape="circle" 
					bgColor="#e54d42" 
					borderColor="#e54d42" 
					@click="operate(details.orderId, 'affirm')"
				/>
			</view>
		</view>
		<view class="station" :style="details.status === 0?'height: 67px':''"></view>
		<u-datetime-picker
			:show="showTimePicker"
			v-model="datetime"
			mode="datetime"
			@cancel = "showTimePicker=false"
			@confirm="onConfirmDataTime"
		></u-datetime-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showTimePicker: false,
				orderId: '',
				details: {},
				dtIndex: null,
				lisIx: null,
			}
		},
		onLoad(option) {
			let that = this
			this.orderId = option.id
			this.lisIx = option.index
			this.getDatails()
			uni.$on('select-staff', obj => {
				that.details.items[obj.index].staffId = obj.id
				that.details.items[obj.index].staffName = obj.nickName
				that.$reqJsonPost('ProjectOrderDoEdit', {
					id: that.details.items[obj.index].id,
					staffId: that.details.items[obj.index].staffId,
				}).then(res=>{
					that.$refs.uToast.show({ message:res.msg })
				})
			})
		},
		onUnload() {
			// 移除监听事
			uni.$off('select-staff')
		},
		methods: {
			onCancel(ix){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认取消该服务?',
					success: function (res) {
						if (res.confirm) {
							that.$reqJsonPost('CancelService', {id: that.details.items[ix].id}).then(res=>{
								that.getDatails()
								// that.upProjectData()
								that.$refs.uToast.show({ message:res.msg })
							})
						}
					}
				})
			},
			confirmRs(ix){
				const that = this
				uni.showModal({
					title: '提示',
					content: '确认该服务项目已完成?',
					success: function (res) {
						if (res.confirm) {
							that.$reqJsonPost('ConfirmProjectOrderItem', { id: that.details.items[ix].id }).then(res=>{
								that.getDatails()
								// that.upProjectData()
								that.$refs.uToast.show({ message:res.msg })
							})
						}
					}
				})
			},
			upProjectData(){
				const that = this
				uni.$emit('up-project', {
					ix: that.lisIx,
					statusText: that.details.statusText,
					status: that.details.status
				})
				uni.navigateBack()
			},
			selDataTime(ix){
				this.dtIndex = ix
				this.showTimePicker = true
			},
			onConfirmDataTime(e){
				let that = this
				this.details.items[this.dtIndex].appointmentTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
				
				that.$reqJsonPost('ProjectOrderDoEdit', {
					id: this.details.items[this.dtIndex].id,
					appointmentTime: this.details.items[this.dtIndex].appointmentTime,
				}).then(res=>{
					that.$refs.uToast.show({ message:res.msg })
				})
				this.showTimePicker = false
			},
			getDatails() {
				this.$reqJsonPost('CoreCmsProjectOrderDetails', { id: this.orderId }).then(res => {
					this.details = res.data.data
				})
			},
			operate(rowid, ty){
				let that = this
				uni.showModal({
					title: '提示',
					content: ty==='affirm'?'确认该订单已收款?':'确认取消该订单?',
					success: function (res) {
						if (res.confirm) {
							if(ty === 'cancel'){
								that.$reqJsonPost('CoreCmsProjectOrderCancel', { id: [rowid], orderType: 11 }).then(res=>{
									that.getDatails()
								})
							}else if (ty === 'affirm'){
								that.$reqJsonPost('CoreCmsProjectOrderPay', {
									orderId: rowid,
									paymentCode: 'offline',
									type: 11,
								}).then(res=>{
									that.getDatails()
								})
							}
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.station{
	padding-bottom: 0;  
	padding-bottom: constant(safe-area-inset-bottom); 
	padding-bottom: env(safe-area-inset-bottom); 
}
</style>
